// 1.饼状图 柱状图插入
function visualization(res) {
  let user = res.data.user;
  // 饼状图插入
  var oPie = echarts.init(document.getElementById("pie_shos"));
  let oPieopt = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ",
    },
    color: ["#5470c6", "#91cc75"],
    legend: {
      x: 150,
      top: 20,
      data: ["女性", "男性"],
    },
    calculable: true,
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["40%", "65%"],
        center: ["40%", "50%"],
        data: [
          { value: `${user.user_woman}`, name: "女性" },
          { value: `${user.user_man}`, name: "男性" },
        ],
      },
    ],
  };
  oPie.setOption(oPieopt);

  // 柱状图插入
  var oColumn = this.echarts.init(document.getElementById("column_show"));
  let oColumnopt = {
    title: {
      text: "各分类文章发布数量",
      top: 20,
      left: 200,
      textStyle: { fontSize: 16 },
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "8%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        axisLine: {
          lineStyle: { color: "#222" },
        },
        data: ["时政", "图片", "娱乐", "汽车", "段子", "科技", "时尚", "中文"],
      },
    ],
    yAxis: {
      type: "value",
      nameTextStyle: { fontSize: 14, color: "#4D4D4D" },
      axisLabel: {
        textStyle: { fontSize: 12, color: "#4D4D4D" },
      },
      axisLine: {
        lineStyle: { color: "#707070" },
      },
    },
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [
          {
            name: "时政",
            value: `33`,
          },
          {
            name: "图片",
            value: "35",
          },
          {
            name: "娱乐",
            value: "42",
          },
          {
            name: "汽车",
            value: "42",
          },
          {
            name: "段子",
            value: "39",
          },
          {
            name: "科技",
            value: "38",
          },
          {
            name: "时尚",
            value: "25",
          },
          {
            name: "中文",
            value: "23",
          },
        ],
      },
    ],
  };
  oColumn.setOption(oColumnopt);
}

//2 发起请求获取数据并渲染
function getUserInfo() {
  $.ajax({
    method: "GET",
    url: "index/baseInfo",
    headers: {
      "x-token":
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMy0wMi0wNCAyMjoyOTo0OCIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiLCJhNzhiNWJkMC0zYzQ5LTExZWMtYWJkYy03YmE4MWNmNmM1ZWYiXSwic3RhdHVzIjowLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIiwi6JCl6ZSA5Li7566hIl19LCJpYXQiOjE2NzU1NjExOTB9.DPDgI_1eodRnf7Q0BovDUKtexZEtR5v4NYv06jSb34M",
    },
    success: function (res) {
      console.log(res);
      visualization(res);
      const htmlstr = res.data.hot_article
        .map((item) => {
          return `
         <div class="content">
            <b>${item.title}</b>
         </div>
        `;
        })
        .join("");
      $(".txt").html(htmlstr);
      const htmlStr = res.data.new_user
        .map((item) => {
          return `
            <div class="content">
              <span  class='username'>${item.username}</span>
              <span  class='sex'>${item.sex ? "女" : "男"}</span>
              <span  class='address'>${item.address ? item.address : ""}</span>
            </div>
        `;
        })
        .join("");
      $(".nws").html(htmlStr);

      // 定义数据
      let datas = {
        admin_num: res.data.admin_num,
        advimg_num: res.data.advimg_num,
        advpos_num: res.data.advpos_num,
        article_num: res.data.article_num,
        total: res.data.user.total,
      };
      let htmlPro = template("tpl-user", datas);
      $(".uploading").html(htmlPro);
    },
  });
}
getUserInfo();
